<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>注册</title>
		<style type="text/css">
			.background{
				margin:0;
				padding:0;
				font-family:sans-serif;
				background-image:url(img/enter.jpg);
				background-repeat: no-repeat;
				background-size:cover;
			}
			.box{
				width:400px;
				padding:40px;
				position:absolute;
				top:50%;
				left:50%;
				transform:translate(-50%,-50%);
				background:rgba(0,0,0,.3);
				box-sizing: border-box;
				box-shadow:0 15px 25px rgba(0,0,0,.5);
				border-radius:10px;
			}
			.box h2{
				color:#fff;
				text-align: center;
				margin:0 0 30px;
				padding:0;
			}
			.inputBox{
				position: relative;
			}
			.inputBox input{
				width:100%;
				padding:10px 0;
				color:#fff;
				letter-spacing: 1px;
				margin-bottom:20px;
				border:none;
				border-bottom:1px solid #fff;
				outline:none;
				background:transparent;
			}
			.inputBox label{
				position:absolute;
				top:0;
				left:0;
				padding:10px 0;
				letter-spacing: 1px;
				color:#fff;
				pointer-events:none;
				transition:.5s;
			}
			.inputBox button{
				position: relative;
				left:260px;
				border:1px solid gainsboro;
				border-radius: 3px;
				outline: none;
				color:blueviolet;
			}
			.inputBox input:focus~label,
			.inputBox input:valid ~ label{
				top:-18px;
				left:0;
				color:#03a9f4;
				font-size:12px;
			}
			.box input[type="enroll"]{
				background:transparent;
				border:none;
				outline: none;
				color:#fff;
				background:#03a9f4;
				padding:10px 20px;
				cursor:pointer;
				border-radius: 5px;
				width:50px;
			}
		</style>
	</head>
	<body class="background">
			<div class="box">
	            <h2>Register</h2>
	            <form>
	                <div class="inputBox" style="text-indent: ;">
	                    <input type="text" name="" required="" id="user">
	                    <label>用户名</label>
	                </div>
	                <div class="inputBox">
	                    <input type="password" name="" required="" id="pass">
	                    <label>密码</label>
	                </div>
	                <div class="inputBox">
	                    <input type="email" name="" required="" id="mail">
	                    <label>邮箱</label>
	                    <button id="getCode">发送验证码</button>
	                </div>
	                <div class="inputBox">
	                    <input type="code" name="" required="" id="code">
	                    <label>验证码</label>
	                </div>
	                <input type="enroll" name="" value="注册" class="register" />
	            </form>  
	        </div>
		<script src="js/jquery-1.12.4.min.js"></script>
		<script type="text/javascript">
//			获取当前文档指定的元素
			var register=document.getElementsByClassName("register")[0]
			$(function(){
				$(".register").click(function(){
//					获取input里面的值
					username=$("#user").val();
 	 				password=$("#pass").val();
 	 				mailbox=$("#mail").val();
 	 				authcode=$("#code").val();
 	 				enroll=$(".register").val();
 	 				$.ajax({
 	 					type:"post",
// 	 					注册的接口
 	 					url:"http://118.195.129.130:3000/user/reg",
 	 					async:true,
 	 					data:{
 	 						us:username,
 	 						ps:password,
 	 						mail:mailbox,
 	 						code:authcode
 	 					},
// 	 					成功的结果
 	 					success:function(data){
 	 						console.log(data);
// 	 						如果数值为-1,页面会弹出后台报错的原因
   	 						if(data.err==-1){
   	 							alert(data.msg);
   	 							document.getElementById("code").value = ""; 
   	 						}
// 	 						如果为0,则跳转页面
 	 						else if(data.err==0){
 	 							window.location.href="ruoyi.html";
 	 						}
 	 					},
// 	 					失败会把后台给的信息在页面中弹出
 	 					error:function(err){
							alert(data.msg);
 	 					}
 	 				});
				})
			})
			//获取验证码
			var getCode=document.getElementById("getCode");
			var email = document.getElementById('mail');
			getCode.onclick = function(){
				$.ajax({
						type:"post",
//						验证码的接口
						url:"http://118.195.129.130:3000/user/getMailCode",
						async:true,
						data:{
							mail:email.value,
						},
						success:function(data){
							console.log(data);	
						},
						error:function(err){
							console.log("错误");
						}
				})
			}
		</script>
	</body>
</html>
